<!DOCTYPE html>
<html>
<head>
    <title>e栈懒人排行 -- 快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link href="/wechat/css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="/wechat/css/common.css" type="text/css" rel="stylesheet"/>
    <script src="/wechat/js/jquery.min.js" type="text/javascript"></script>
    <script src="/wechat/js/notice.js" type="text/javascript"></script>
    <script src="/wechat/js/common.js" type="text/javascript"></script>
    <script src="/layer/layer.js"></script>
    <style type="text/css">
        .lazyboardCont {
            width: 100%;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardHead {
            width: 100%;
            background-image: linear-gradient(to top, #424890, #f4f4f4);
            box-shadow: 0px 3px 5px #666666;
        }

        .lazyboardHead .lazyboardHeadTitle {
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            color: #fff;
            font-weight: bold;
            background: url(/wechat/wximages/sidaibg.png) no-repeat center center;
            background-size: cover;
        }

        .lazyboardCont .lazyboardHead .lazyboardRank {
            width: 100%;
            margin-top: 10px;
            padding-bottom: 10px;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardHead .lazyboardRank .ranknumDiv {
            width: 32%;
            margin-left: 1%;
            padding: 10px 0px;
            float: left;
            position: relative;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum2 {
            width: 40%;
            margin: calc(50% - 40%) auto;
            border-radius: calc(50%);
            border: 2px solid #72d664;
            overflow: hidden;
            box-shadow: 0px 0px 3px #72d664;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum1 {
            width: 50%;
            margin: 0 auto calc(50% - 40%);
            border-radius: calc(50%);
            border: 2px solid #f8ca03;
            box-shadow: 0px 0px 3px #f8ca03;
            overflow: hidden;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .ranknum3 {
            width: 40%;
            margin: calc(50% - 40%) auto;
            border-radius: calc(50%);
            border: 2px solid #b66ff3;
            box-shadow: 0px 0px 3px #b66ff3;
            overflow: hidden;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum2Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 15px);
            width: 30px;
            height: 30px;
            background: url(/wechat/wximages/ranknum2.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum1Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 17px);
            width: 34px;
            height: 34px;
            background: url(/wechat/wximages/ranknum1.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNum3Icon {
            position: absolute;
            bottom: 30px;
            left: calc(50% - 15px);
            width: 30px;
            height: 30px;
            background: url(/wechat/wximages/ranknum3.png) no-repeat center center;
            background-size: 100%;
        }

        .lazyboardHead .lazyboardRank .ranknumDiv .rankNumName {
            font-size: 12px;
            width: 90%;
            margin: 15px auto 0px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lazyboardCont .lazyboardNavCont {
            width: 88%;
            margin: 30px auto 20px;
            overflow: hidden;
            border: 1px solid #4099eb;
            border-radius: 19px;
            box-shadow: 0px 0px 2px #888888;
        }

        .lazyboardCont .lazyboardNavCont .lazyboardNav {
            width: 33.3%;
            line-height: 38px;
            float: left;
            text-align: center;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
        }

        .lazyboardCont .lazyboardNavCont .lazyboardNavFocus {
            background-image: linear-gradient(to top, #424890, #4099eb);
            color: #fff;
        }

        .boardRankScroll {
            width: 300%;
            margin: 20px 0px;
            overflow: hidden;
        }

        .lazyboardCont .lazyboardRankCont {
            width: calc(100% / 3);
            float: left;
        }

        .lazyboardCont .lazyboardRankCont .lazyboardRankDiv {
            width: 96%;
            height: 52px;
            padding: 10px 2%;
            margin-top: 5px;
            overflow: hidden;
            background: #fff;
            border-top: #f4f4f4;
            border-bottom: #f4f4f4;
            box-shadow: 0px 0px 2px #e1e1e1;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankNumTxt {
            width: 35px;
            padding-right: 15px;
            line-height: 52px;
            text-align: center;
            font-size: 16px;
            font-weight: bolder;
            font-style: italic;
            float: left;
            color: #333333;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankIcon {
            width: 50px;
            height: 50px;
            float: left;
            border: 2px solid #4099eb;
            border-radius: 25px;
            overflow: hidden;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankNameTxt {
            width: calc(100% - 50px - 52px - 85px - 10px - 25px);
            color: #333333;
            padding-left: 10px;
            line-height: 52px;
            font-size: 14px;
            float: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lazyboardRankCont .lazyboardRankDiv .lazyboardRankScore {
            width: 95px;
            padding-right: 10px;
            line-height: 52px;
            font-size: 20px;
            font-weight: bolder;
            float: right;
            color: #4099eb;
            text-align: right;
        }

        .tab2, .tab3 {

        }
    </style>
</head>
<body>
<div class="content">
    <div class="headerNav">
        <div class="headerNavTop">
            <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
        </div>
        <div class="headerNavCont">
            <a href="./index.html">快递首页</a>
            <a href="./userhome.html">个人中心</a>
            <a href="./delivery.html">送货上门</a>
            <!-- 			<a href="./sendexpress.html">我要寄件</a>
             --> <a href="./lazyboard.html">懒人排行</a>
            <a href="./expassistant.html">快递助手</a>
        </div>
    </div>
    <input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
    <div class="lazyboardCont">
        <div class="lazyboardHead">
            <div class="lazyboardHeadTitle">e栈懒人榜</div>
            <div class="lazyboardRank">
                <!--前三排名-->
                <div class="ranknumDiv">
                    <div class="ranknum2">
                        <img src="images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum2Icon"></div>
                    <div class="rankNumName" id="two">-</div>
                </div>

                <div class="ranknumDiv">
                    <div class="ranknum1">
                        <img src="images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum1Icon"></div>
                    <div class="rankNumName" id="one">-</div>
                </div>

                <div class="ranknumDiv">
                    <div class="ranknum3">
                        <img src="images/userHeadImg.jpg" width="100%">
                    </div>
                    <div class="rankNum3Icon"></div>
                    <div class="rankNumName" id="three">-</div>
                </div>

            </div>
        </div>

        <div class="lazyboardNavCont">
            <div class="lazyboardNav lazyboardNavFocus" id="total-ranking">总排名</div>
            <div class="lazyboardNav" id="year-ranking">年排名</div>
            <div class="lazyboardNav" id="month-ranking">月排名</div>
        </div>

        <!--总排名-->
        <div class="boardRankScroll">
            <div class="lazyboardRankCont tab1">
<!--                <div class="lazyboardRankDiv">-->
<!--                    <div class="lazyboardRankNumTxt">1</div>-->
<!--                    <div class="lazyboardRankIcon">-->
<!--                        <img src="images/userHeadImg.jpg" width="100%">-->
<!--                    </div>-->
<!--                    <div class="lazyboardRankNameTxt">大帅比</div>-->
<!--                    <div class="lazyboardRankScore">15</div>-->
<!--                </div>-->
            </div>

            <!--年排名-->
            <div class="lazyboardRankCont tab2">
<!--                <div class="lazyboardRankDiv">-->
<!--                    <div class="lazyboardRankNumTxt">1</div>-->
<!--                    <div class="lazyboardRankIcon">-->
<!--                        <img src="images/userHeadImg.jpg" width="100%">-->
<!--                    </div>-->
<!--                    <div class="lazyboardRankNameTxt">大帅比</div>-->
<!--                    <div class="lazyboardRankScore">15</div>-->
<!--                </div>-->
            </div>

            <!--月排名-->
            <div class="lazyboardRankCont tab3">
<!--                <div class="lazyboardRankDiv">-->
<!--                    <div class="lazyboardRankNumTxt">1</div>-->
<!--                    <div class="lazyboardRankIcon">-->
<!--                        <img src="images/userHeadImg.jpg" width="100%">-->
<!--                    </div>-->
<!--                    <div class="lazyboardRankNameTxt">大帅比</div>-->
<!--                    <div class="lazyboardRankScore">15</div>-->
<!--                </div>-->

            </div>

        </div>
    </div>
    <script>
        $(function () {
            total_table();
            rank_year();
            rank_month();
        })
        function total_table() {
            var windowId = layer.load();
            $.get("/wechat/lazyRanking.do",{type:'total'},function (data) {
                layer.close(windowId);
                if(data.status===1){
                    var list = data.data;
                    var itemRank = "";
                    for (var i = 0; i < list.length; i++) {
                        //渲染懒人前三榜
                        if(i===0){
                            $("#one").html(list[i].username);
                        } else if(i===1) {
                            $("#two").html(list[i].username);
                        }else if(i===2){
                            $("#three").html(list[i].username);
                        }
                        //总排名列表
                        itemRank = "<div class=\"lazyboardRankDiv\">\n" +
                            "                    <div class=\"lazyboardRankNumTxt\">"+(i+1)+"</div>\n" +
                            "                    <div class=\"lazyboardRankIcon\">\n" +
                            "                        <img src=\"images/userHeadImg.jpg\" width=\"100%\">\n" +
                            "                    </div>\n" +
                            "                    <div class=\"lazyboardRankNameTxt\">"+list[i].username+"</div>\n" +
                            "                    <div class=\"lazyboardRankScore\">"+list[i].number+"</div>\n" +
                            "            </div>";
                        $(".tab1").append(itemRank);
                    }

                }
            })
        }
        function rank_year() {
            var windowId = layer.load();
            $.get("/wechat/lazyRanking.do",{type:'year'},function (data) {
                layer.close(windowId);
                var itemRank = "";
                if(data.status===1){
                    var list = data.data;
                    for (var i = 0; i < list.length; i++) {
                        //渲染年排名列表
                        itemRank = "<div class=\"lazyboardRankDiv\">\n" +
                            "                    <div class=\"lazyboardRankNumTxt\">"+(i+1)+"</div>\n" +
                            "                    <div class=\"lazyboardRankIcon\">\n" +
                            "                        <img src=\"images/userHeadImg.jpg\" width=\"100%\">\n" +
                            "                    </div>\n" +
                            "                    <div class=\"lazyboardRankNameTxt\">"+list[i].username+"</div>\n" +
                            "                    <div class=\"lazyboardRankScore\">"+list[i].number+"</div>\n" +
                            "            </div>";
                        $(".tab2").append(itemRank);
                    }
                }
            })
        }
        function rank_month() {
            var windowId = layer.load();
            $.get("/wechat/lazyRanking.do",{type:'month'},function (data) {
                layer.close(windowId);
                var itemRank = "";
                if(data.status===1){
                    var list = data.data;
                    for (var i = 0; i < list.length; i++) {
                        //渲染月排名列表
                        itemRank = "<div class=\"lazyboardRankDiv\">\n" +
                            "                    <div class=\"lazyboardRankNumTxt\">"+(i+1)+"</div>\n" +
                            "                    <div class=\"lazyboardRankIcon\">\n" +
                            "                        <img src=\"images/userHeadImg.jpg\" width=\"100%\">\n" +
                            "                    </div>\n" +
                            "                    <div class=\"lazyboardRankNameTxt\">"+list[i].username+"</div>\n" +
                            "                    <div class=\"lazyboardRankScore\">"+list[i].number+"</div>\n" +
                            "            </div>";
                        $(".tab3").append(itemRank);
                    }
                }
            })
        }
    </script>
    <script type="text/javascript">
        $(function () {
            $(".lazyboardNavCont .lazyboardNav").click(function () {
                var windowW = $(window).width();
                if (windowW > 600) {
                    windowW = 600;
                }
                var indexnum = $(this).index();
                var focusnum = $(".lazyboardNavCont .lazyboardNav").index($(".lazyboardNavFocus"));
                $(this).siblings().removeClass("lazyboardNavFocus");
                $(this).addClass("lazyboardNavFocus");

                if (indexnum !== focusnum) {
                    $(".boardRankScroll").stop();

                    switch (indexnum) {
                        case 0 :
                            $(".boardRankScroll").animate({"margin-left": "0px"});
                            break;
                        case 1 :
                            $(".boardRankScroll").animate({"margin-left": -windowW + "px"});
                            break;
                        case 2 :
                            $(".boardRankScroll").animate({"margin-left": -windowW * 2 + "px"});
                            break;
                    }
                }
            });
        });
    </script>
</div>
</body>
</html>